{{ extend "base.html" }} 
{{ block head_ex }} 
<script type="text/javascript" src="{{=url_for_static('js/jquery-1.3.2.min.js')}}"></script>
<script type="text/javascript" src="{{=url_for_static('js/jquery.blockUI.js')}}"></script>
<script type="text/javascript">
showalbum = function(album){
		$("#name").val(album.name);
		$("#albumid").val(album.id);
		$("#description").val(album.description);
		$("#photocount").html(album.photoslist.length);
		$("#createdate").html(album.createdate);
		$("#updatedate").html(album.updatedate);
		$("option#"+album.id).val(album.name);
		if(album.public)
		{
		   $("input[type=radio][name=public][value=true]").attr("checked",'checked');
		   $("#"+album.id).html(album.name);
		}
		else
		{
		   $("input[type=radio][name=public][value=false]").attr("checked",'checked');
		   $("#"+album.id).html(album.name+"({{ =_('private') }})");
		}
		$("#cover_img").attr('src','{{=gallery_settings.baseurl}}/thumb/'+album.coverphotoid+'.png');
		buildCoverList(album.photoslist, album.coverphotoid);
}; 
var buildCoverList  = function(coverphtotlist, coverphotoid) {
	$('#coverphoto_select').html('');
	
    $.each( coverphtotlist , function(i,photoid){                           
        var option = $('<option value="'+ photoid +'"></option>');
        var img = $('<img src="{{=gallery_settings.baseurl}}/thumb/'+photoid+'.png"/>');
        option.append(photoid);
        option.append(img);
        if(coverphotoid == photoid)
        {
        	option.attr('selected',true);
        }
        $('#coverphoto_select').append(option);
    });
    $("#coverphoto_select").find("option").click(function(){
    	$("#cover_img").attr('src','{{=gallery_settings.baseurl}}/thumb/'+$(this).val()+'.png');
    });
    $("#coverphoto_select").keyup(function(){
    	var photoid=$(this).children("[selected]").val();
    	$("#cover_img").attr('src','{{=gallery_settings.baseurl}}/thumb/'+photoid+'.png');
    });
};
$(document).ready(function() {
		$("#albumselect").change(function() {
				  $("#albuminfo").html("{{=_('Getting album information...') }}")
				  
				  $("#page").block({message: '<h1>{{=_("Getting album information...") }}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"400px" } 
		            });
				  
                  $.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=getalbum",
                    { 'albumname': $(this).val()},
                  	function(json){
	                  	 $("#page").unblock();
	                  	 if (json.result=='ok') {
	                  	 	showalbum(json.album); 
	                  	 }
	                  	 else
	                  	 {
	                  	 	alert(json.msg);
	                  	 }
                  	 });    
        }); 
        $('#save').click(function() { 
	        $("#albuminfo").html("{{=_('Saving album settings...') }}")
				  
				  $("#page").block({message: '<h1>{{=_("Saving album settings...") }}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"400px" } 
		            });
				  
                  $.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=savealbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked'),
                    'coverphotoid': $("#coverphoto_select").children("[selected]").val()},
                  	function(json){ 
	                  	 $("#page").unblock();
	                  	 if (json.result=='ok') {
	                  	 	showalbum(json.album); 
	                  	 }
	                  	 else
	                  	 {
	                  	 	alert(json.msg);
	                  	 }
                  	}); 
    	});
    	$('#clear').click(function() { 
				  $("#page").block({ message: $('#clearquestion'), css: { width: '375px' } });
    	});
    	$('#clearyes').click(function() {
    			  $("#page").unblock();
    			  $("#page").block({message: '<h1>{{=_("Cleaning album photos...") }}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"500px" } 
		            });
				  
                  $.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=clearalbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked')},
                  	function(json){ 
                  		 $("#page").unblock();
	                  	 if (json.result=='ok') {
	                  	 	showalbum(json.album); 
	                  	 }
	                  	 else
	                  	 {
	                  	 	alert(json.msg);
	                  	 }
					});
    	});
    	
    	$('#delete').click(function() { 
    			$("#page").block({ message: $('#deletequestion'), css: { width: '375px' } });			  
    	});
    	$('#deleteyes').click(function() {
    			$("#page").unblock();
            	$("#page").block({message: '<h1>{{=_("Deleting album...") }}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"500px" } 
		            });
				  
                $.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=deletealbum",
                    { 'albumid': $('#albumid').val(),'albumname': $('#name').val(), 
                    'description': $('#description').val(), 
                    'public': $("#public").attr('checked')},
                  	function(json){ 
                  		$("#page").unblock();
                  		if (json.result=='ok') {
                  			$("#"+$('#albumid').val()).hide();
	                  		showalbum(json.album); 
	                  		$("#"+$('#albumid').val()).attr('selected', true); 
	                  	 }
	                  	 else
	                  	 {
	                  	 	alert('error: '+json.msg);
	                  	 }
                  	});
        });

        $('#deleteno').click( function() {$("#page").unblock(); });
        $('#clearno').click( function() {$("#page").unblock(); });
    	
});              
</script>
{{ end }}
 
{{ block page }}
<div id="page">
	<form method="post">
	<div id="albumlist">
		<p>{{=_( "Albums List" )}}:</p>
		<select id="albumselect" name="albumselect" size="8">
			{{ for album in albums: }}
			<option id="{{=album.id}}" value="{{=album.name}}">{{=album.name}}{{ if not album.public: }}({{=_("private") }}){{ pass }}</option>
	        {{ pass }}
		</select>
		
		<p>{{=_("Create Album") }}</p>
		<div id="createalbum">
			<ul><li>{{ =_( "name") }}: <input id="new_name" name="new_name" type="text" size="20" value=""/></li>
			<li><input type="radio" name="new_public" value="true" checked>{{=_("public") }}</input>
			<input type="radio" name="new_public" value="false">{{=_("private") }}</input></li>
			<li>{{=_("Album Description" )}}: <textarea wrap="soft" name="new_description" rows="3" cols="15"></textarea> </li>
			<li><input type="submit" value="{{=_('Create Album') }}" name="createalbum"></li></ul>
		</div>
	</div>
	<div id="albumsettings">
		<table id="admin_table">
	    <tr>
            <th scope="row">{{=_("Album Name" )}}:</th>
            <td><input id="name" name="name" type="text" size="35" value=""/>
            <input id="albumid" type=hidden name="albumid" value=""> 
            </td>
        </tr>
		<tr>
            <th scope="row">{{=_("Album Description" )}}:</th>
            <td><textarea id="description" wrap="soft" name="description" rows="3" cols="25"></textarea>
            </td>
        </tr>
        <tr>
            <th scope="row">{{=_("Permission") }}:</th>
            <td><input id="public" type="radio" name="public" value="true">{{=_("public") }}</input>
				<input type="radio" name="public" value="false">{{=_("private") }}</input>
            </td>
        </tr>
        <tr>
            <th scope="row">{{=_("Cover Photo") }}:</th>
            <td><img id="cover_img"></img> 
            <select id="coverphoto_select">
            </select>
            </td>
        </tr>
        <tr>
            <th scope="row">{{=_("Photo Count") }}:</th>
            <td><div id="photocount"></div>
            </td>
        </tr>
        <tr>
            <th scope="row">{{=_("Date created") }}:</th>
            <td><div id="createdate"></div>
            </td>
        </tr>
        <tr>
            <th scope="row">{{=_("Date updated") }}:</th>
            <td><div id="updatedate"></div>
            </td>
        </tr>
       <tr>
            <th scope="row"><input id="save" type="button" value="{{=_('Save Settings' )}}" name="save"/></th>
            <td>
            <input id="clear" type="button" value="{{=_('Clean Photos') }}" name="clear"/>({{=_('careful') }})
            <input id="delete" type="button" value="{{=_('Delete Album') }}" name="delete"/>({{=_('more careful') }})
            </td>
       </tr>
	   </table>
	</div>
	</form>
	<div id="deletequestion" style="display:none; cursor: default; color: red;">
        <h1>{{=_('R you seriously delete this album?') }}</h1>
        <input type="button" id="deleteno" value="{{=_('No, I just try the button') }}" />
        <input type="button" id="deleteyes" value="{{=_('Yes, just delete it') }}" /> 
	</div>
	<div id="clearquestion" style="display:none; cursor: default; color: red;">
        <h1>{{=_('Are you seriously clean photos of this album?') }}</h1>
        <input type="button" id="clearno" value="{{=_('No, I just try the button') }}" />
        <input type="button" id="clearyes" value="{{=_('Yes, just clean it') }}" />
	</div>
	<div style="clear: both;">&nbsp;</div>
</div>
{{ end }}
